<script lang="ts">
import { defineComponent, reactive, computed } from "vue";
import { Popup, Cell, CellGroup, RadioGroup, Radio, Icon } from "vant";
import { AppModule } from "@/store/modules/app";
import AppLanguage from "./AppLanguage.vue";
export default defineComponent({
  components: {
    [Popup.name]: Popup,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Icon.name]: Icon,
    AppLanguage,
  },
  setup() {
    const setat = reactive({
      open: false,
      // bg: require("@/assets/image/header_bg.png"),
      menuList: [
        {
          title: "index",
          name: "/index",
          icon: "wap-home-o",
        },
        {
          title: "team",
          name: "/team",
          icon: "friends-o",
        },
        {
          title: "NFT",
          name: "/NFT",
          icon: "medal-o",
        },
        {
          title: "announcement",
          name: "/announcement",
          icon: "volume-o",
        },
      ],
    });
    return { setat, AppModule };
  },
});
</script>
<template>
  <van-popup
    v-model:show="setat.open"
    position="right"
    :duration="0.2"
    close-icon="arrow-left"
    close-icon-position="top-left"
    closeable
    :style="{
      height: '100%',
      width: '70%',
      background: `#7d684d  url(${setat.bg})  top / cover no-repeat`,
    }"
  >
    <div class="menu-wrap">
      <div class="logo">
        <img src="@/assets/logo.png" alt="" srcset="" />
      </div>
      <div class="menu">
        <div class="row" v-for="(item, i) in setat.menuList" :key="i">
          <router-link
            :to="item.name"
            class="title"
            @click="setat.open = false"
          >
            <van-icon :name="item.icon" />
            {{ $t("menu." + item.title) }}</router-link
          >
        </div>
        <div class="row">
          <div class="title" @click="$refs.language.setat.open = true">
            <svg
              viewBox="0 0 24 24"
              color="textSubtle"
              width="24px"
              xmlns="http://www.w3.org/2000/svg"
              class="sc-231a1e38-0 etperP"
            >
              <path
                d="M11.99 2C6.47 2 2 6.48 2 12C2 17.52 6.47 22 11.99 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 11.99 2ZM18.92 8H15.97C15.65 6.75 15.19 5.55 14.59 4.44C16.43 5.07 17.96 6.35 18.92 8ZM12 4.04C12.83 5.24 13.48 6.57 13.91 8H10.09C10.52 6.57 11.17 5.24 12 4.04ZM4.26 14C4.1 13.36 4 12.69 4 12C4 11.31 4.1 10.64 4.26 10H7.64C7.56 10.66 7.5 11.32 7.5 12C7.5 12.68 7.56 13.34 7.64 14H4.26ZM5.08 16H8.03C8.35 17.25 8.81 18.45 9.41 19.56C7.57 18.93 6.04 17.66 5.08 16ZM8.03 8H5.08C6.04 6.34 7.57 5.07 9.41 4.44C8.81 5.55 8.35 6.75 8.03 8ZM12 19.96C11.17 18.76 10.52 17.43 10.09 16H13.91C13.48 17.43 12.83 18.76 12 19.96ZM14.34 14H9.66C9.57 13.34 9.5 12.68 9.5 12C9.5 11.32 9.57 10.65 9.66 10H14.34C14.43 10.65 14.5 11.32 14.5 12C14.5 12.68 14.43 13.34 14.34 14ZM14.59 19.56C15.19 18.45 15.65 17.25 15.97 16H18.92C17.96 17.65 16.43 18.93 14.59 19.56ZM16.36 14C16.44 13.34 16.5 12.68 16.5 12C16.5 11.32 16.44 10.66 16.36 10H19.74C19.9 10.64 20 11.31 20 12C20 12.69 19.9 13.36 19.74 14H16.36Z"
              ></path>
            </svg>
            {{ $t("layout.language") }}
          </div>
        </div>
      </div>
    </div>
  </van-popup>
  <app-language ref="language" />
</template>

<style lang="less" scoped>
.menu-wrap {
  padding: 30px 0;

  .logo {
    height: 80px;
    margin: 0 auto;
    text-align: center;

    img {
      margin-top: 15px;
      display: inline-block;
      height: 100%;
    }
  }

  .menu {
    margin-top: 20px;

    .row {
      position: relative;

      .title {
        padding: 12px 0 12px 30px;
        display: flex;
        align-items: center;
        line-height: 20px;
        font-size: 16px;
        font-weight: 400;
        color: #fff;

        // font-family: FZBeiWeiKaiShu-Z15T;
        .van-icon {
          font-size: 20px;
          color: #fff;
          margin-right: 10px;
        }

        &.router-link-exact-active {
          background: #a28662;
        }
      }
      svg {
        margin-right: 10px;
        color: #fff;
        fill: #fff;
        width: 20px;
        height: 20px;
      }

      .children {
        ul {
          li {
            a {
              padding: 12px 0 12px 55px;
            }
          }
        }
      }

      &:after {
        position: absolute;
        content: "";
        left: 30px;
        right: 30px;
        border-bottom: 1px solid rgba(60, 46, 17, 0.3);
        z-index: -1;
      }
    }
  }
}
</style>
